<template>
  <div class="result">
    <div class="result-header">
      <div class="left">
        <div class="left-title">{{ title }}</div>
        <div class="left-desc">{{ desc }}</div>
      </div>
      <div class="right">
        <img src="../icon/scroll.png" alt="" @click="reset" />
        <img
          src="../icon/scroll-fanhui.png"
          alt=""
          @click="$router.push('./home')"
        />
      </div>
    </div>
    <div class="score">
      <div class="cicle-wrapper">
        <div class="cicle">
          <van-circle
            v-model="currentRate"
            :rate="
              parseInt(
                (this.answerMake.filter((item) => item === true).length /
                  (this.answerMake.filter((item) => item !== undefined)
                    .length || 1)) *
                  100
              )
            "
            color="#1c5ac8"
            layer-color="#ccc"
            size="80px"
            :stroke-width="80"
            :clockwise="false"
          >
            <div class="text" style="color: #1c5ac8">
              {{
                parseInt(
                  (this.answerMake.filter((item) => item === true).length /
                    (this.answerMake.filter((item) => item !== undefined)
                      .length || 1)) *
                    100
                ) + "%"
              }}
            </div>
          </van-circle>
          <span style="color: #1c5ac8">正确率</span>
        </div>
        <div v-show="!!allScore" class="cicle">
          <van-circle
            v-model="currentRate"
            :rate="parseInt((score / allScore) * 100)"
            color="#54d100"
            layer-color="#ccc"
            size="80px"
            :stroke-width="80"
            :clockwise="false"
          >
            <div class="text" style="color: #54d100">
              {{ score + "分" }}
            </div>
          </van-circle>
          <span style="color: #54d100">成绩</span>
        </div>
      </div>
      <div class="message-detail">
        <div>
          已完成:
          <span style="color: #0043e7">{{
            answerMake.filter((item) => item !== undefined).length
          }}</span
          >/{{ countNum }}
        </div>
        <div>
          正确答案:<span style="color: #54d100">{{
            answerMake.filter((item) => item).length
          }}</span>
        </div>
        <div>
          错误答案:<span style="color: #54d100">{{
            answerMake.filter((item) => item === false).length
          }}</span>
        </div>
      </div>
    </div>
    <div class="practiceList">
      <div class="practiceList-title van-hairline--bottom">
        点击查看各题答案解析
      </div>
      <div class="content">
        <div
          v-for="index in countNum"
          :key="index"
          @click="nav(index)"
          :style="`${
            answerMake[index - 1] !== undefined
              ? `background-color: ${
                  answerMake[index - 1] ? '#54d100' : '#ff1f1a'
                };color:#fff`
              : ''
          }`"
        >
          {{ index }}
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    answerMake: Array,
    title: {
      type: String,
      default: "XXXXX",
    },
    desc: {
      type: String,
      default: "XX",
    },
    countNum: Number,
    allScore: {
      type: Number,
      default: 0,
    },
    score: {
      type: Number,
      default: 0,
    },
  },
  data() {
    return {
      currentRate: 0,
      // currentRate: 0,
    };
  },
  watch: {
    answerMake: {
      deep: true,
      handler: (val) => {
        // console.log(val, 333);
      },
    },
  },

  mounted() {
    // console.log(this.score, this.allscore);
  },
  methods: {
    nav(index) {
      Math.random;
      // console.log("nav");
      this.$emit("changeCurrentPage", index - 1);
    },
    reset() {
      this.$emit("resetPractice");
    },
  },
};
</script>

<style>
@import url("../css/AnswerResult.css");
</style>
